<template>
  <div>
    <!-- 作业:做一个计算器组件 -->
    <div>
      <input type="text" v-model.number="num1" />+
      <input type="text" v-model.number="num2" />={{ num1 + num2 }}
    </div>

    输入姓名：<input type="text" v-model="name" />
    <div>我输入的是：{{ name }}</div>

    <!-- <p>count:{{ count }}</p>
    <button @click="change($event)">1111</button>
    <p v-if="a">v-if</p>
    <p v-show="!a">v-show</p>
    <hr style="width: 100%; color: red" />
    <p v-if="a">v-if</p>
    <p v-show="!a">v-show</p>
    <button @click="a = !a">点我更换内容</button>
    <hr style="width: 100%; color: red" />
    <div
      v-for="(item, index) in list"
      :key="index"
      style="align-items: flex-start"
    >
      <p>{{ index }}---{{ item }}</p>
    </div>
    <div v-for="(item, index) in list2" :key="index">
      <p>{{ item }}--+{{ index }}</p>
    </div> -->
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
const name = ref("");
const num1 = ref(0);
const num2 = ref(0);
</script>
